<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .example-box {
        border: 1px dashed black;
      }
      .example-box > * {
        border: 1px dashed red;
      }
      .case1 {
        columns: 2;
      }
      .example-box.reset li {
        width: 70px;
      }
      .case2-input:checked + * + * + * + * + * + .example-box {
        width: 100px;
        column-width: 200px;
      }
      .case3-input:checked + * + * + * + .example-box {
        width: 200px;
        column-width: 100px;
      }
      .case4-input:checked + * + .example-box {
        width: 200px;
        column-width: 70px;
      }
      .case5 {
        columns: 2;
        gap: 30px;
      }
      .case6 {
        columns: 4;
        gap: 5%;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./16-动画-animation.html">上一篇</a>
      <a href="./18-弹性布局.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>columns</dt>
        <dd>
          <h4>基础</h4>
          <ul class="example-box case1">
            <li>张三丰</li>
            <li>扫地僧</li>
            <li>东方不败</li>
            <li>独孤求败</li>
          </ul>
          <pre><code class="language-scss">ul { columns: 2; }</code></pre>
        </dd>
        <dd>
          columns是column-width、column-count属性的缩写
          <h4>columns-width</h4>
          该属性表示每一列的最佳宽度；只是期望，不代表最终渲染效果。
          <br />
          <input type="checkbox" class="case2-input" />
          width:100,column-width:200,宽度不够无效
          <br />
          <input type="checkbox" class="case3-input" />
          width:200,column-width:100,不够分依然无效
          <br />
          <input type="checkbox" class="case4-input" />
          width:200,column-width:70,够分变为两栏
          <br />
          <ul class="example-box reset">
            <li>张三丰</li>
            <li>扫地僧</li>
            <li>东方不败</li>
            <li>独孤求败</li>
          </ul>
        </dd>
        <dd>
          <h4>column-count</h4>
          该属性表示每一列的最佳个数；只是期望，不代表最终渲染效果。类似column-width
        </dd>
        <dd>
          <h4>同时存在column-width和column-count</h4>
          共同制约；按计算后更小的那个值排布
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>column-gap和gap</dt>
        <dd>
          布局间的间隙；column-gap是gap的子属性，是row-gap的简写
          <ul class="example-box reset case5">
            <li>张三丰</li>
            <li>扫地僧</li>
            <li>东方不败</li>
            <li>独孤求败</li>
          </ul>
        </dd>
        <pre><code class="language-scss">ul { columns: 2; gap: 30px; }</code></pre>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>column-span（以下的全部不常用，了解即可）</dt>
        <dd>
          是否可以跨多栏显示
          <ul class="example-box case5">
            <li>张三丰</li>
            <li>扫地僧</li>
            <li style="column-span: all;">东方不败</li>
            <li>独孤求败</li>
          </ul>
        </dd>
        <pre><code class="language-scss">column-span: all</code></pre>
        <h4>
          column-fill/break-inside/box-decoration-break
        </h4>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>column可以用来做单行的两端口对齐</dt>
        <pre><code class="language-scss">columns: 4; gap: 5%;</code></pre>
        <div class="example-box case6">
          <div>张三丰</div>
          <div>扫地僧</div>
          <div>东方不败</div>
          <div>独孤求败</div>
        </div>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
